<!--
 * @Author: 程家兴
 * @Date: 2022-08-15 08:41:08
 * @LastEditors: 程家兴
 * @LastEditTime: 2022-08-20 14:43:20
 * @FilePath: \bdh-pumping-web\src\views\components\intelligentIrrigation\zmDialog.vue
 * @Description: 
-->
<template>
  <div class="zmDialog">
    <a-modal
      title="操作记录"
      :visible="visible"
      :centered="dialogTitleAlign"
      :closable="closable"
      :footer="footer"
      class="large_screens"
    >
      <div class="dialogClose" @click="dialogCloseClick"></div>
      <div>
        <div class="module_table">
            <a-table 
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="tableData"
            :pagination="{
              total,
              showTotal: total => `共 ${total} 条`,
              showQuickJumper:true,
              pageSize:10,
              onChange:(page)=>onPageChange(page),
            }"
            :rowClassName="
                  (record, index) => {
                    let className = ''
                    className = index % 2 ===0 ? 'light' : 'dark'
                    return className
                  }"
           >
           </a-table>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  components: {},
  props: ['visible', 'type'],
  data() {
    return {
      // 弹窗配置
      dialogTitleAlign: true,
      closable:false,
      footer:null,
      // 闸门弹出框数据
      // 表格查询起止时间
      tableData: [],
      total: 0,

      param: {},
      columns: [
          {
            title: '',
            dataIndex: '',
            key:'index',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'水闸名称',
            align:"center",
            dataIndex: 'name'
          },
          {
            title:'水闸编号',
            align:"center",
            dataIndex: 'code'
          },
          {
            title:'运行类型',
            align:"center",
            dataIndex: 'operationType'
          },
          {
            title:'即时请求结果',
            align:"center",
            dataIndex: 'immResult'
          },
          {
            title:'最终执行结果',
            align:"center",
            dataIndex: 'finalResult'
          },    {
            title:'创建时间',
            align:"center",
            dataIndex: 'createTime'
          },
          {
            title:'最终执行结果时间',
            align:"center",
            dataIndex: 'finalResultTime'
          }, 
        ]
    }
  },
  computed: {},

  methods: {
    //页码改变的回调，参数是改变后的页码及每页条数
    onPageChange(page) {
      this.getGateOperationRecordList(page)//数据信息列表
    },
    getGateOperationRecordList(pageNo) {
      let result = {}
      getAction('/wiis/gateOr/list', { pageNo: pageNo }).then((res) => {
        result = res.result
        // console.log(res)
        this.tableData = result.records
        this.total = result.total
        for (let i = 0; i < this.tableData.length; i++) {
          if(this.tableData[i].operationType=='0'){
            this.tableData[i].operationType="关闸"
          }else if(this.tableData[i].operationType=='1'){
            this.tableData[i].operationType="开闸"
          }else if(this.tableData[i].operationType=='2'){
            this.tableData[i].operationType="开度"
          }
        }
       
      })
    },
    dialogCloseClick() {
      this.$emit('close')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.getGateOperationRecordList(val)
    },
  },
  // 监听父组件传递的参数，更改当前展示的数据

  created() {
    this.getGateOperationRecordList()
  },
}
</script>

<style lang="less" scoped>
  .dialogClose {
    width: 29px;
    height: 29px;
    background: url('../../../assets/images/intelligentIrrigation/dialogClose.png');
    background-size: 100% 100%;
    position: absolute;
    right: 27px;
    top: 30px;
    cursor: pointer;
  }
.zmDialog {
  position: relative;
  .module_table {
    position: absolute;
    top: 100px;
    left: 23px;
    width: 1142px;
    .pagination_total {
      position: absolute;
      bottom: 9px;
      left: 520px;
      font-size: 18px;
      font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
      font-weight: 400;
      text-align: left;
      color: #ffffff;
      line-height: 14px;
      .pagination_total_num {
        font-size: 18px;
        font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
        font-weight: 400;
        text-align: left;
        color: #00fbff;
        line-height: 14px;
      }
    }
  }
}
</style>
<style lang="less">
.large_screens{
.ant-modal {
  width: 1192px!important;
  height: 970px!important;
  background: rgba(1, 31, 86, 0.92);
  border: 1px solid #00fbff;
  margin-top: 15vh;
}
.ant-modal-content{
  background: #113258;
  width: 1190px!important;
  height: 753px!important;
  .ant-modal-header {
    background: transparent;
    border-bottom: 1px solid #00395f;
    height: 50px;
    .ant-modal-title {
      -webkit-background-clip: text;
      color: transparent;
      background-image: linear-gradient(0deg, #1765ff 0%, #4a87ff 0%, #49d9fe 55%, #8fefff 80%);
      font-size: 26px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: 700;
      text-align: center;
      line-height: 45px;
    }
  }
}
.module_table .ant-table-thead th {
  background: #113258;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: center;
  color: #eef8ff;
  line-height: 48px;
  border-right: none;
  border-bottom-color: #00fbff;
}
.module_table .ant-table-tbody tr{
  background: #07376a;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: center;
  color: #eef8ff;
  line-height: 48px;
  border-bottom-color: #00fbff;
  :hover {
  }
}
.light {
	background: #113258!important;
}
.dark {
	background:#07376a!important;
}
.module_table .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td{
   background: #07376a;
}
.ant-table-bordered .ant-table-header > table, .ant-table-bordered .ant-table-body > table, .ant-table-bordered .ant-table-fixed-left table, .ant-table-bordered .ant-table-fixed-right table{
  border: 1px solid #00fbff;
}
.ant-table-bordered .ant-table-thead > tr > th , .ant-table-bordered .ant-table-tbody > tr > td{
  border-right: none;
  border-bottom-color:#00fbff;
}
.ant-pagination{
    font-size: 18px;
    font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
}
.ant-pagination-prev, .ant-pagination-next{
  background: #b9bed6;
  margin-right: 8px!important;
}
.ant-pagination-item a{
  background: #b9bed6;
}
.ant-pagination-item-active a{
  background: #1890FF;
  color: #fff;
  width: 100%;
  height: 100%;
}
.ant-pagination-total-text{
  color: #00fbff;
}
.ant-pagination-options-quick-jumper{
  color:#b9bed6;
}
.ant-pagination.mini .ant-pagination-item{
  margin-right: 8px!important;
}
.ant-pagination-item-ellipsis{
  color: #b9bed6!important;
}
}
</style>
